<template>
    <div>
        <el-tabs tabPosition="left" v-model="activeName" type="card" style="height: 600px;">
            <el-tab-pane label="我的文件" name="first">
                <div style="display: flex; margin-left: 18rem ">
                        <Upload :text="'直接上传'" @confrim="(e)=>{confrim(e)}" :type="'primary'"></Upload>
                        <div class="tupianbanjia" @click="InnerDialog">图片搬家</div>
                </div>
                <div class="flex-wrap" >
                    <div style="position:relative; margin: 10rem 16rem;width: 116rem;height: 116rem;" v-for="(item, i) in img" :key="i"  @click="selectPicture(i,item)">
                        <img :class="activeIndex == i ? 'selected' : '' " :src="item" alt="" class="imgageList">
                        <div :class="activeIndex == i ? 'xiagou' : '' "></div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="图片库" style="height:500px">
                <el-tabs type="border-card" @tab-click="change">
                    <el-tab-pane label="素材图">
                        <el-tabs type="border-card" @tab-click="change">
                            <el-tab-pane v-for="(value, key, index) in imageList.sc" :key="index" :label="key" class="flex-wrap">
                                <div style="position:relative; margin: 10rem 16rem;width: 116rem;height: 116rem;" v-for="(item,i) in value" :key="i" @click="selectPicture(i,item)">
                                    <img :class="activeIndex == i ? 'selected' : '' " :src="item" alt="" class="imgageList" >
                                    <div :class="activeIndex == i ? 'xiagou' : '' "></div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="插图">
                        <el-tabs type="border-card"  @tab-click="change">
                            <el-tab-pane v-for="(value, key, index) in imageList.ct" :key="index" :label="key" class="flex-wrap">
                                <div style="position:relative; margin: 10rem 16rem;width: 116rem;height: 116rem;" v-for="(item,i) in value" :key="i" @click="selectPicture(i,item)">
                                    <img :class="activeIndex == i ? 'selected' : '' " :src="item" alt="" class="imgageList" >
                                    <div :class="activeIndex == i ? 'xiagou' : '' "></div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="矢量图">
                        <el-tabs type="border-card" @tab-click="change">
                            <el-tab-pane v-for="(value, key, index) in imageList.slt" :key="index" :label="key" class="flex-wrap">
                                <div style="position:relative; margin: 10rem 16rem;width: 116rem;height: 116rem;" v-for="(item,i) in value" :key="i" @click="selectPicture(i,item)">
                                    <img :class="activeIndex == i ? 'selected' : '' " :src="item" alt="" class="imgageList" >
                                    <div :class="activeIndex == i ? 'xiagou' : '' "></div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="图标">
                        <el-tabs type="border-card" @tab-click="change">
                            <el-tab-pane v-for="(value, key, index) in imageList.tb" :key="index" :label="key" class="flex-wrap">
                                <div style="position:relative; margin: 10rem 16rem;width: 116rem;height: 116rem;" v-for="(item,i) in value" :key="i" @click="selectPicture(i,item)">
                                    <img :class="activeIndex == i ? 'selected' : '' " :src="item" alt="" class="imgageList" >
                                    <div :class="activeIndex == i ? 'xiagou' : '' "></div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="形状">
                        <el-tabs type="border-card" @tab-click="change">
                            <el-tab-pane v-for="(value, key, index) in imageList.xz" :key="index" :label="key" class="flex-wrap">
                                <div style="position:relative; margin: 10rem 16rem;width: 116rem;height: 116rem;" v-for="(item,i) in value" :key="i" @click="selectPicture(i,item)">
                                    <img :class="activeIndex == i ? 'selected' : '' " :src="item" alt="" class="imgageList" >
                                    <div :class="activeIndex == i ? 'xiagou' : '' "></div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="文字容器">
                        <el-tabs type="border-card" @tab-click="change">
                            <el-tab-pane v-for="(value, key, index) in imageList.wzrq" :key="index" :label="key" class="flex-wrap">
                                <div style="position:relative; margin: 10rem 16rem;width: 116rem;height: 116rem;" v-for="(item,i) in value" :key="i" @click="selectPicture(i,item)">
                                    <img :class="activeIndex == i ? 'selected' : '' " :src="item" alt="" class="imgageList" >
                                    <div :class="activeIndex == i ? 'xiagou' : '' "></div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>
        <div class="flex-center" style="margin-top: 10rem">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushPicture">确定</el-button>
        </div>
        <el-dialog
            title="图片搬家"
            :visible.sync="shouInnerDialog"
            width="40%"
            append-to-body
            >
            <el-form label-width="100rem">
                <el-form-item label="网页地址：">
                    <el-input v-model="picUrl" style="width: 300rem" placeholder="输入网页地址，马上爬取图片"></el-input>
                </el-form-item>
            </el-form>
            <img :src="picUrl" alt="" class="imgageList" v-show="picUrl">
            <span slot="footer" class="dialog-footer">
                <el-button @click="shouInnerDialog = false">取 消</el-button>
                <el-button type="primary" @click="shouDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Upload  from "../Upload/index.vue"
import imageList from "@/assets/json/image.js"
export default {
    props: ["componentId", "componentList", "activeCompont"],
    components: {Upload},
    data() {
        return {
            activeName: 'first',
            shouInnerDialog: false,
            activeIndex:null,
            isActive: false,
            imageList: {},
            img: [
                "https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIPuzi9cFKLm8iiwwgA849wk!160x160.jpg",
                "https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIPuzi9cFKLiejeYBMIAPOIAK!160x160.jpg",
                "https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIJv17NUFKOCUlqwCMIAPOIAK!160x160.jpg",
                "https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIPmzi9cFKIXpjY4FMIAPOIAK!160x160.jpg",
                "https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIJv17NUFKJrI6bcDMIAPONAJ!160x160.jpg"
            ],
            activeImg: '',
            picUrl: '',
            imgUrl: ''
            // chatuList: ['人物','科技','装饰','建筑','产品','美食','漂浮','水墨','特效','动物','自然','文字'],
            // shiliangtuList: ['生活','节日','人物','建筑','文字','服饰','动物','表情','植物','美食','运动','交通','商务','娱乐','图表','花纹','漂浮','边框','自然'],
            // tubiaoList:['系统','社交','服饰','人物','美食','动态','图标','交通','教育','运动','娱乐','名片','商务','科技','金融','自然','医疗','动物','地理','建筑','表情','生活','学习','标识'],
            // shapeList: ['基础','方形','圆形','心形','星形','花形','多边形','水墨','立体','半圆','祥云'],
            // wenziList: ['条幅','标签','按钮','对话框']
        }
    },
    created() {
        console.log(imageList)
        this.imageList = imageList

        if(this.activeCompont){
            this.active_component =this.activeCompont
        }else{
            for (let key in this.componentList) {
                if (
                    this.componentList[key].isDialog &&this.componentList[key].props&&
                    this.componentList[key].props.name == this.componentId
                ) {
                    this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
                }
            }
        }
    },

    methods: {
        InnerDialog() {
            this.shouInnerDialog = true
        },
        confrim(e){
            this.img.push(e)
            // this.img = e
            // this.active_component.propValue.imgList[i].img=e
        },
        change(){
            this.activeIndex = null
        },
        selectPicture(i,item) {
            console.log(i);
            this.activeIndex = i
            this.activeImg = item
        },
        closeTK(){
            this.$emit("closeTK")
        },
        pushPicture() {
            this.$emit('closeTK',this.activeImg)
        },
        shouDialog() {
           this.img.push(this.picUrl)
           this.shouInnerDialog = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-tabs--left .el-tabs__header.is-left {
        margin-right: 29px;
    }

    .tupianbanjia {
        width: 80rem;
        height: 32rem;
        background: #409EFF;
        color: #fff;
        font-size: 12rem;
        cursor: pointer;
        text-align: center;
        line-height: 32rem;
        margin-left: 20rem;
    }
    .imgageList {
        cursor: pointer;
        width: 116rem;
        height: 116rem;
        object-fit: contain;
        background: #eee;
    }

    // 选中图片后的样式
    .selected {
        border: 1px solid #5874d8;
    }
    .xiagou {
        position: absolute;
        right: 0;
        bottom: 0;
        content: "";
        width: 28px;
        height: 24px;
        background: url(https://fe.faisys.com/component_1_0/image/component.png?v=201811211600) no-repeat -135px -28px;
    }
</style>
